import { UserOutlined } from '@ant-design/icons';
import { Space, Avatar } from 'antd';
import React from 'react';

import { Badge } from './index';

/**
 * Badge组件演示
 * TODO: 待完善 样式需要优化
 * 展示徽标的三种不同状态：状态点、状态文案和数字
 */
const BadgeDemo: React.FC = () => {
  return (
    <Space direction="vertical" size="large">
      {/* 状态点示例 */}
      <div className="badge-demo-section">
        <h3>状态点</h3>
        <Space>
          <Badge status="success" />
          <Badge status="error" />
          <Badge status="default" />
          <Badge status="processing" />
          <Badge status="warning" />
        </Space>
      </div>

      {/* 状态文案示例 */}
      <div className="badge-demo-section">
        <h3>状态</h3>
        <Space direction="vertical">
          <Badge status="success" text="成功" />
          <Badge status="error" text="断开" />
          <Badge status="default" text="离线" />
          <Badge status="processing" text="进度" />
          <Badge status="warning" text="警告" />
        </Space>
      </div>

      {/* 数字示例 */}
      <div className="badge-demo-section">
        <h3>数字</h3>
        <Space size="large">
          <Badge count={5}>
            <Avatar shape="square" icon={<UserOutlined />} />
          </Badge>
          <Badge count={0} showZero>
            <Avatar shape="square" icon={<UserOutlined />} />
          </Badge>
          <Badge count={99}>
            <Avatar shape="square" icon={<UserOutlined />} />
          </Badge>
          <Badge count={100} overflowCount={99}>
            <Avatar shape="square" icon={<UserOutlined />} />
          </Badge>
          <Badge count={<span className="custom-count">新</span>}>
            <Avatar shape="square" icon={<UserOutlined />} />
          </Badge>
        </Space>
      </div>

      {/* 组合使用示例 */}
      <div className="badge-demo-section">
        <h3>组合使用</h3>
        <Space size="large">
          <Badge count={5} status="success">
            <Avatar shape="square" icon={<UserOutlined />} />
          </Badge>
          <Badge dot status="error">
            <Avatar shape="square" icon={<UserOutlined />} />
          </Badge>
          <Badge count={8} offset={[10, 0]}>
            <Avatar shape="square" icon={<UserOutlined />} />
          </Badge>
        </Space>
      </div>
    </Space>
  );
};

export default BadgeDemo;
